<template>
    <div class="notFoundTextStyle">
        <span>😭页面丢失了</span>
        <br><br>
        <span class="goMainStyle" @click="goMainBtn">👉去主页</span>
        <br>
        <button @click="dddddd">手动清除缓存</button>
    </div>
    <div ref="lottieRef" class="lottieStyle"></div>
</template>
<script setup>
import lottie from "lottie-web";
import { onMounted,ref } from "vue";
import { useRouter } from 'vue-router'
let router = useRouter()
let lot = ref()
const lottieRef = ref()
let sheepJson = new URL('@/assets/lotties/robotRun.json', import.meta.url).href
onMounted(()=>{
    createLottieImg()
})
const createLottieImg = ()=>{
    if(lot.value != null){
        lot.value.destroy()
    }
    lot.value = lottie.loadAnimation({
        container: lottieRef.value, //渲染动画所需容器
        renderer: "svg",//动画渲染类型，svg/canvas/html
        loop: true,//是否循环播放，布尔值
        autoplay: false,//是否自动播放，布尔值
        // animationData: jsonData,//JSON动画数据，与path属性不共存
        // rendererSettings: this.options.rendererSettings,
        path: sheepJson // the path to the animation json
    })
    lot.value.setSpeed(1.5)
    lot.value.play()
}
const goMainBtn = ()=>{
    router.push({name:'chat'})
}
const dddddd= ()=>{
    localStorage.clear()
}
</script>
<style scoped lang="scss">
.notFoundTextStyle{
    z-index: 1;
    position: absolute;
    top: 70%;
    left: 50%;
    transform: translate(-50%,-50%);
    font-size: 20px;
    .goMainStyle{
        float: right;
        text-decoration-color: rgb(52, 133, 255);
        text-decoration-line:underline;
        text-decoration-skip:ink;
    }
}
.lottieStyle{
    position: absolute;
    top: 0%;
    // transform: translateY(-50%);
}
</style>